<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="../css/style.css" />
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="../images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span>
                    </td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
            </tbody>
        </table>
        <div class="foot" id="foot">

            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="../images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>
</body>
<script>

    var checkAll = document.getElementsByClassName("check-all")[0];
    var checkOneList = document.getElementsByClassName("check-one");
    var addList = document.getElementsByClassName("add");
    var reduceList = document.getElementsByClassName("reduce");
    var deleteList = document.getElementsByClassName("delete");
    var deleteAll = document.getElementById("deleteAll");


    // 全选: 
    // 单击全选 所有的单选 跟随全选的状态
    checkAll.onclick = function () {
        var status = this.checked;
        console.log(status);

        for (var i = 0; i < checkOneList.length; i++) {
            var checkOne = checkOneList[i];
            checkOne.checked = status;
        }
    }


    // 反选功能:
    // 每次点击单选 => 判断所有的单选(商品)是否全部被选中, 如果全部选中 => 全选(反选)  否则 => 全选(取消反选)
    for (let i = 0; i < checkOneList.length; i++) {
        let checkOne = checkOneList[i];
        checkOne.onclick = function () {
            var flag = Array.from(checkOneList).every(item => item.checked);
            checkAll.checked = flag;
        }
    }


    // 点击加号:
    // a. 输入框数量加1
    // b. 小计更新 = 单价 * 数量
    // c. 减号按钮 "-"显示

    for (let i = 0; i < addList.length; i++) {
        let add = addList[i];
        add.onclick = function () {
            console.log(this);  // 绑定事件的元素 -> 被点击的加号

            // a. 输入框数量加1
            var countInput = this.previousElementSibling; // 加号的前一个元素 => 输入框
            var num = countInput.value; //取值
            num++; // 自增
            countInput.value = num; // 更新到页面中

            // b. 小计更新 = 单价 * 数量
            // 数量 => num
            // 单价 => 页面中找

            var parentTd = this.parentElement;
            var priceTd = parentTd.previousElementSibling;
            var subtotalTd = parentTd.nextElementSibling;

            var price = priceTd.textContent * 1;
            var subtotal = price * num;

            // 小数运算可能会失精度 => 处理
            subtotalTd.textContent = subtotal.toFixed(2);


            //  减号按钮 "-"显示
            var reduce = countInput.previousElementSibling; // 对应的减号
            reduce.textContent = "-";



        }
    }


    // 点击减号: 
    // a. 输入框数量减1
    // b. 小计更新 = 单价 * 数量
    // c. 减之前判断,如果数量已经是1 => 不能减
    // d. 减之后判断,如果数量已经是1 => 减号按钮"-"小时(2切为1的瞬间)

    for (let i = 0; i < reduceList.length; i++) {
        let reduce = reduceList[i];
        reduce.onclick = function () {
            console.log(this); // 被点击的减号

            // a. 输入框数量减1
            var countInput = this.nextElementSibling; // 加号的前一个元素 => 输入框
            var num = countInput.value; //取值 
            // c. 减之前判断,如果数量已经是1 => 不能减
            if (num == 1) {
                return false;  // 后续代码不在执行
            }

            num--; // 自减   

            // d. 减之后判断,如果数量已经是1 => 减号按钮"-"小时(2切为1的瞬间)
            if (num == 1) {  // 2切1的瞬间
                this.textContent = "";
            }


            countInput.value = num; // 更新到页面中


            // b. 小计更新 = 单价 * 数量
            // 数量 => num
            // 单价 => 页面中找

            var parentTd = this.parentElement;
            var priceTd = parentTd.previousElementSibling;
            var subtotalTd = parentTd.nextElementSibling;

            var price = priceTd.textContent * 1;
            var subtotal = price * num;

            // 小数运算可能会失精度 => 处理
            subtotalTd.textContent = subtotal.toFixed(2);

        }

    }


    // 删除细节
    // 1. 每次删除商品之后 -> 剩余的商品有可能全部被选中 => 全选框反选
    // 2. 商品全部删除之后 -> 购物车应该取消选中 -> 但是如果用假设法/every判断是否反选 -> 此时存在漏洞(空数组 不会进入假设法  => flag => true)


    // 删除
    // 1. 单删
    //    每件商品之后都有删除按钮 -> 点击删除 -> 删除该商品(一行)
    for (let i = 0; i < deleteList.length; i++) {
        let del = deleteList[i];
        del.onclick = function () {
            // console.log(this); // 被点击的删除

            if (confirm("是否删除该商品?")) {
                var tr = this.parentElement.parentElement;
                console.log(tr);
                tr.remove();

                // 每次删除商品之后 -> 剩余的商品有可能全部被选中 => 全选框反选
                // a. checkOneList 会随着页面check-one的增加或减少自动更新集合
                // b. 只需要再次判断剩余的商品是否全部被选中
                // console.log(checkOneList);

                /* var flag = true;  // 假设全都选中
                for (var j = 0; j < checkOneList.length; j++) {
                    var item = checkOneList[j];

                    // !item.checked == true  => item.checked === false
                    if (!item.checked) {//存在未选中的
                        flag = false;
                    }
                }
                checkAll.checked = flag; */

                var flag = Array.from(checkOneList).every(item => item.checked);
                //  checkOneList.length == 0 => 集合为空(没有商品)
                checkAll.checked = checkOneList.length == 0 ? false : flag;

            }



        }
    }

    // 2. 全删
    //    删除购物车中 被选中的商品 

    // 全删的问题: 全删的是否 有商品未删除
    //  var checkOneList = document.getElementsByClassName("check-one");
    // checkOneList 会随着页面check-one的增加或减少自动更新集合

    // 前面的元素被删除之后 集合更新 后面的元素会批量前移 (类似数组塌陷)
    //     0        1        2        3
    // [checkOne,checkOne,checkOne,checkOne];

    deleteAll.onclick = function () {
        for (var j = 0; j < checkOneList.length; j++) {
            var checkOne = checkOneList[j]; // 找到每一个单选
            if (checkOne.checked) { // 如果单选被选中
                var tr = checkOne.parentElement.parentElement;
                tr.remove();
                j--;
            }
        }
        // 全部删除之后取消选中
        var flag = Array.from(checkOneList).every(item => item.checked);
        //  checkOneList.length == 0 => 集合为空(没有商品)
        checkAll.checked = checkOneList.length == 0 ? false : flag;
    }



</script>

</html>